<script setup>
import { useCartStore } from '@/stores/cart.js'
import CartCard from '@/components/CartCard.vue'
import { useRouter } from 'vue-router'

const cart = useCartStore()
const router = useRouter()

const cartList = cart.cartList

const gotoOrderConfirmation = (name) => {
  router.push({ path: '/orderconfirmation', query: { shopName: name}})
}
</script>

<template>
  <div class="cart_list">
      <div class="cart_list_header">我的全部购物车<span v-if="cartList.length > 0">({{ cartList.length }})</span></div>
      <div class="cart_list_content">
          <div class="cart_list_content_item" v-for="item in cartList" :key="item.name" @click="gotoOrderConfirmation(item.name)">
              <CartCard :shopCart="item" />
          </div>
      </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
.cart_list {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: .5rem;
  background-color: $dark-bgColor;
  overflow-y: scroll;

  &_header {
      padding: .08rem .18rem;
      font-size: .16rem;
      color: $content-fontcolor;
      text-align: center;
      line-height: .24rem;
      background-color: $bgColor;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
  }

  &_content {
      margin-top: .58rem;
  }
}
</style>